<!-- workCenter 专有的hier组件 -->
<template>
  <div class="c-workCenter-dictionary">
    <div class="flex">
      <div style="" class="menuwp" dis-hover>
        <div class="menu-item flex">
          <span class="flex1"></span><Button size="small" @click="addFirstLine()">+</Button>
        </div>
        <div v-for="(row,index) in data" :key="index" @click="clickNode(row, index)"
          :class="['menu-item flex', curIndex === index ? 'select' : '', errorLine.includes(index) ? 'error' : '']"
        >
          <span class="flex1">{{lang[row.name] || row.name || 'new'}}</span>
          <template v-if="!fieldObj[data[index].name]">
            <Button size="small" @click.stop="addLine(index)">+</Button>
            <Button size="small" @click.stop="deleteLine(row, index)">-</Button>
          </template>
        </div>
      </div>
      <div style="" class="formwp">
      <Form v-if="data.length" :model="data[curIndex]" :label-width="90" label-position="right">
          <Row >
            <template v-if="fieldObj[data[curIndex].name] && data[curIndex].properties.length">
              <Col v-for="(item,index) in (fieldObj[data[curIndex].name] || fieldList)"
                :key="index" :span="item.span || 24">
                <FieldItem v-if="data[curIndex].properties[index]"
                  v-model="data[curIndex].properties[index].defautValue" :config="item.config"
                  @change="val => change(val, item)"
                  :formItemProps="{label: item.title, labelWidth: item.labelWidth, prop: item.key, }"
                />
              </Col>
            </template>
            <template v-else>
              <Col v-for="(item,index) in fieldList" :key="index" :span="item.span || 24">
                <FieldItem
                  v-model="data[curIndex][item.key]" :config="item.config" @change="val => change(val, item)"
                  :formItemProps="{label: item.title, labelWidth: item.labelWidth, prop: item.key, }"
                />
              </Col>
              <Col :span="24" class="propertyWp">
                <Alert style="margin: 0">{{ $t(`model.modelProperties`)}}</Alert>
                <cfgModelPropertyNoGroup ref="_properties" v-model="data[curIndex].properties"/>
                <!-- <Alert style="margin: 0">{{ $t(`model.modelStatusProperties`)}}</Alert>
                <cfg-modelStatusProperty v-model="data[curIndex].statusProperties"/> -->
              </Col>
            </template>
          </Row>
      </Form>
      </div>
    </div>
    <div class="flex ivu-mt footerwp">
      <Row class="tips flex1">
        <Col :span="8" v-for="item in message" :key="item">{{ item }}</Col>
      </Row>
    </div>
  </div>
</template>

<script>
import hierUtil from './util'
export default {
  name: "cfgHierDictionary",
  data() {
    return {
      curIndex: 0,
      message: [],
      errorLine: [],
    }
  },
  created() {
  },
  methods: {
    addFirstLine() {
      this.hierObject.add()
    },
    addLine(index) {
      this.hierObject.insertAfter(index)
    },
    deleteLine(row, index) {
      this.hierObject.delete('nodeId', row)
    },
    clickNode(row, index) {
      this.curIndex = index
    },
    change(val, item) {
      if (item.key === 'name') {
        this.message = []
        this.errorLine = []
      }
    },
    checkValues() {
      let propVal = this.$refs._properties ? this.$refs._properties.checkValues() : true
      if (!propVal) {
        return false
      } else {
        this.message = []
        this.errorLine = []
        let {message, errorLine} = hierUtil.checkName(this.data, 'name', this.lang)
        if (message.length) {
          this.message = message
          this.errorLine = errorLine
          return false
        }
      }
      return true
    }
  },
  props: {
    hierObject: {
      default() {
        return null
      }
    },
    modelFieldList: {
      default() {
        return []
      }
    },
    isInstance: {
      default: false
    },
    readonly: {
      default: true
    }
  },
  computed: {
    data() {
      let res = this.hierObject && this.hierObject.hierProperties.content ? this.hierObject.hierProperties.content : [];
      return res
    },
    curData() {
      let res = this.data.length ? this.data[this.curIndex] : {}
      return res
    },
    fieldList() {
        return hierUtil.fieldList(this.G_Locale)
    },
    fieldObj() {
      return {
        // condition: [
        // ],
        createInsFlag: [
          {
              key: 'condition',
              title: this.lang.condition,
              span: 24,
              config: {
                type: 'text',
              },
          },
          {
              key: 'createInsFlag',
              title: this.lang.createInsFlag,
              span: 8,
              config: {
                type: 'switch',
              },
          },
        ],
        workUnit: [
          {
              key: 'link',
              title: { 'zh-CN': '关联工位', 'en-US': 'link work unit' }[this.G_Locale],
              span: 24,
              config: {
                type: 'pointer',
                pointerName: 'twins',
                modelType: 'twinsModel',
                props: {type: 'workunit'},
              },
          },
        ],
      }
    },
    lang() {
      return {
        "en-US": {
          sameName: 'same name',
          condition: 'condition',
          createInsFlag: 'create instance',
          workUnit: 'work unit',
        },
        "zh-CN": {
          sameName: '名称相同',
          condition: '条件',
          createInsFlag: '生成实例',
          workUnit: '工位',
        },
      }[this.G_Locale]
    },
  },
}
</script>

<style scoped lang="less">
  .c-workCenter-dictionary {
    position: relative;
    margin-bottom: 16px;
    &::after {
      content: "";
      position: absolute;
      width: 1px;
      background-color: #eee;
      top: -16px;
      bottom: -32px;
      left: 210px;
    }
    .menuwp {
      width: 200px;
      margin-right: 10px;
      height: 100%;
      cursor: pointer;
      .menu-item:hover {
        color: var(--primary-color);
      }
      /deep/ .ivu-btn {
        width: 24px;
      }
      /deep/ .ivu-btn + .ivu-btn {
        margin-left: 6px;
      }
    }
    .formwp {
      flex: 1;
    }
    .menu-item {
      padding: 6px 12px;
      border: 1px solid transparent;
      &.error {
          border-color: red;
      }
      &.select {
        color: var(--primary-color);
      }
    }
    .tips {
        margin-left: 30px;
        line-height: 30px;
        color: red;
    }
  }
</style>